html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* {
    box-sizing: border-box;
}


body#page-wrap {      
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-flex-flow: row;
  flex-flow: row;
}


nav#accordion {
  padding: 10px;
  
  height: 100%;
  width: 200px;
      
  -webkit-order: 1;  
  order: 1;
}

section#main-content {
  padding: 10px;
  border-left: 1px solid black;
  
  height: 100%;
  width: calc(100% - 200px);
  
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-flex-flow: column;
  flex-flow: column;

  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


section#focus-content {
  -webkit-order: 1;  
  order: 1;

  height: calc(100% - 75px);
  width: 100%;

  display: block;
}

section#mini-player {
  -webkit-order: 2;
  order: 2;

  height: 75px;
  width: 100%;

  display: block;
}


section[role='page'] {
  display: none; 
}
ul#menu {
  width: 180px;
}